<template>
    <div class="large-map">
        <div id="mapChart"></div>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { echartLoad, toDecimalNoZero } from "@/utils";
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
    name: "home",
    components: {},
})
export default class extends Vue {
    pageData: any[] = [];
    chart: any = null;
    loading = false;
    async mounted() {
        this.loading = true;
        await this.getPageData();
        echartLoad(() => {
            const data = require(`@/utils/map.json`);
            window.echarts.registerMap("china", data);
            this.setChart();
            this.loading = false;
        });
    }
    async getPageData(){
        const res= await api.findAchievement()
        this.pageData=res.data
    }
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }

        this.startAutoPlay();

        this.chart.on("mouseover", () => {
            //this.chart.dispatchAction({ type: "hideTip", seriesIndex: 0, dataIndex: this.lastIndex });
            //this.chart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: this.lastIndex });
        });

        // 监听鼠标离开图表事件：恢复轮播
        this.chart.on("globalout", () => {
            this.startAutoPlay(); // 重新启动定时器
        });
    }
    currentIndex = 0;
    lastIndex = -1;
    startAutoPlay() {
        // 获取所有区域
        const dataList = this.pageData;
        // 默认高亮四川区域
        const findIdx = dataList.findIndex((item) => {
            return item.name === "四川";
        });
        this.currentIndex = findIdx;
        this.lastIndex = Number(this.currentIndex);
        // 触发 Tooltip 显示
        this.chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0, // 对应 series 的索引
            dataIndex: this.currentIndex, // 当前数据项索引
        });
        this.chart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: this.currentIndex });
        return;
    }
    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("mapChart");
        let max=Math.max(...this.pageData.map(item=>item.value))  || 0
        max=Math.floor(max*1.1)

        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            tooltip: {
                trigger: "item",
                showDelay: 0,
                transitionDuration: 0.2,
            },
            visualMap: {
                right: "50",
                top: "center",

                min: 0,
                max: max,
                inRange: {
                    color: ["#C3FEFF", "#1DAAFF"],
                },
                text: ["高", "低"],
                calculable: false,
                textStyle: {
                    color: "#C3FEFF",
                },
            },
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getSeries() {
        return {
            name: "科技成果",
            type: "map",
            roam: false,
            map: "china",
            zoom: 1.2,
            emphasis: {
                label: {
                    show: true,
                },
            },
            data: this.pageData.map((item)=>{
                const nameArr1=['北京','天津','上海','重庆']
                const nameArr2=['西藏','内蒙古']
                let name=item.name+'省'
                if(nameArr1.indexOf(item.name)>=0){
                    name=item.name+'市'
                }
                if(nameArr2.indexOf(item.name)>=0){
                    name=item.name+'自治区'
                }
                if(item.name==='新疆'){
                    name='新疆维吾尔自治区'
                }
                if(item.name==='宁夏'){
                    name='宁夏回族自治区'
                }
                if(item.name==='广西'){
                    name='广西壮族自治区'
                }
                if(item.name==='香港'){
                    name='香港特别行政区'
                }
                if(item.name==='澳门'){
                    name='澳门特别行政区'
                }
                return {
                    name,
                    value:item.value
                }
            })
        };
    }
}
</script>
<style lang="scss">
.large-map {
    height: 40vh;
    #mapChart {
        width: 100%;
        height: 100%;
    }
}
</style>
